import React, { Component, Fragment } from 'react'

import { Card } from 'antd'
import { Link } from 'react-router-dom'
class PieContent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      total_count: 0,
      bikeresult: {
        code: 200,
        result: {
          total_count: 6,
          bike_list: [
            '117.2153741234,39.0920610585',
            '117.2161465996,39.0911116932',
            '117.2185069435,39.0909867758',
            '117.2200197094,39.0909118252',
            '117.2216392233,39.0909560195',
            '117.2216657659,39.0936504141',
          ],
          route_list: [
            '117.2170800083,39.0943178317',
            '117.2171121948,39.0930270662',
            '117.2171551102,39.0918611932',
            '117.2171395435,39.0903659681',
          ],
          service_list: [
            { lat: 39.0931965615, lon: 117.2240636608 },
            { lat: 39.0942250123, lon: 117.2238544485 },
            { lat: 39.0948370791, lon: 117.2227279207 },
            { lat: 39.0950006788, lon: 117.220963847 },
            { lat: 39.0950339882, lon: 117.2190541141 },
            { lat: 39.0946842383, lon: 117.2171336525 },
            { lat: 39.0942179024, lon: 117.2153526657 },
            { lat: 39.0936266506, lon: 117.2139042728 },
            { lat: 39.0930187386, lon: 117.2127884739 },
            { lat: 39.0925274087, lon: 117.2125631683 },
            { lat: 39.0914697887, lon: 117.2134214752 },
            { lat: 39.0900578348, lon: 117.2144787922 },
            { lat: 39.0898413078, lon: 117.2153585567 },
            { lat: 39.0898246519, lon: 117.2171395435 },
            { lat: 39.0898746197, lon: 117.21966082 },
            { lat: 39.0900566047, lon: 117.2227872088 },
            { lat: 39.0901398843, lon: 117.2250509932 },
            { lat: 39.0922513729, lon: 117.225259926 },
          ],
        },
      },
    }
    this.renderMap = this.renderMap.bind(this)
    this.addMapControl = this.addMapControl.bind(this)
  }
  componentDidMount() {
    this.getData()
  }
  getData() {
    this.setState({
      total_count: this.state.bikeresult.result.total_count,
    })
    this.renderMap(this.state.bikeresult.result)
  }
  // 渲染地图
  renderMap = (res) => {
    let starticonurl = require('../../images/start_point.png')
    let endiconurl = require('../../images/end_point.png')
    let bikeiconurl = require('../../images/bike.jpg')
    let list = res.route_list
    this.map = new window.BMap.Map('container', { enableMapClick: false })
    let gps1 = list[0].split(',')
    let startPoint = new window.BMap.Point(gps1[0], gps1[1])
    let gps2 = list[list.length - 1].split(',')
    let endPoint = new window.BMap.Point(gps2[0], gps2[1])

    this.map.centerAndZoom(endPoint, 16)
    // map.clearOverlays();

    //添加起始图标
    let startPointIcon = new window.BMap.Icon(
      starticonurl,
      new window.BMap.Size(36, 42),
      {
        imageSize: new window.BMap.Size(36, 42),
        anchor: new window.BMap.Size(18, 42),
      }
    )

    var bikeMarkerStart = new window.BMap.Marker(startPoint, {
      icon: startPointIcon,
    })
    this.map.addOverlay(bikeMarkerStart)

    let endPointIcon = new window.BMap.Icon(
      endiconurl,
      new window.BMap.Size(36, 42),
      {
        imageSize: new window.BMap.Size(36, 42),
        anchor: new window.BMap.Size(18, 42),
      }
    )
    var bikeMarkerEnd = new window.BMap.Marker(endPoint, { icon: endPointIcon })
    this.map.addOverlay(bikeMarkerEnd)

    let routeList = []
    list.forEach((item) => {
      let p = item.split(',')
      let point = new window.BMap.Point(p[0], p[1])
      routeList.push(point)
    })
    // 行驶路线
    var polyLine = new window.BMap.Polyline(routeList, {
      strokeColor: '#EAB603',
      strokeWeight: 3,
      strokeOpacity: 1,
    })
    this.map.addOverlay(polyLine)

    // 服务区路线
    let serviceList = res.service_list
    let servicePointist = []
    serviceList.forEach((item) => {
      let point = new window.BMap.Point(item.lon, item.lat)
      servicePointist.push(point)
    })
    // 画线
    var polyServiceLine = new window.BMap.Polyline(servicePointist, {
      strokeColor: '#ef4136',
      strokeWeight: 3,
      strokeOpacity: 1,
    })
    this.map.addOverlay(polyServiceLine)
    //服务区填充
    let polygon = new window.BMap.Polygon(servicePointist, {
      strokeColor: '#CE0000',
      strokeWeight: 4,
      strokeOpacity: 1,
      fillColor: '#ff8605',
      fillOpacity: 0.4,
    })
    this.map.addOverlay(polygon)
    // 添加地图中的自行车
    let bikeList = res.bike_list
    let bikeIcon = new window.BMap.Icon(
      bikeiconurl,
      new window.BMap.Size(36, 42),
      {
        imageSize: new window.BMap.Size(36, 42),
        anchor: new window.BMap.Size(18, 42),
      }
    )
    bikeList.forEach((item) => {
      let p = item.split(',')
      let point = new window.BMap.Point(p[0], p[1])
      var bikeMarker = new window.BMap.Marker(point, { icon: bikeIcon })
      this.map.addOverlay(bikeMarker)
    })

    // 添加地图控件
    this.addMapControl()
  }

  // 添加地图控件
  addMapControl = () => {
    let map = this.map
    // 左上角，添加比例尺
    var top_right_control = new window.BMap.ScaleControl({
      anchor: window.BMAP_ANCHOR_TOP_RIGHT,
    })
    var top_right_navigation = new window.BMap.NavigationControl({
      anchor: window.BMAP_ANCHOR_TOP_RIGHT,
    })
    //添加控件和比例尺
    map.addControl(top_right_control)
    map.addControl(top_right_navigation)
    map.enableScrollWheelZoom(true)
    // legend.addLegend(map);
  }
  render() {
    return (
      <Fragment>
        <Card
          title="车辆地图"
          extra={
            <Link to="/admin/bikeMap" style={{ color: '#007CFA' }}>
              更多
            </Link>
          }
          className="BasicCard"
        >
          <div>共{this.state.total_count}辆车</div>
          <div id="container" style={{ height: 500 }}></div>
        </Card>
      </Fragment>
    )
  }
}

export default PieContent
